<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>慢慢买比价网-手机版-优惠券列表</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../lib/swiper/css/swiper.css">
    <link rel="stylesheet" href="../css/coupon-list.css">
</head>
<body>
    <div class="coupon-top">
        <div><img src="../images/left-arrow.png" alt=""> </div>
        <div>肯德基优惠券</div>
        <div><img src="../images/header_app.png" alt=""></div>
    </div>
    <div class="coupon-list">
        <div class="tip">
            --点餐前出示手机中的优惠券，即可享受优惠--
        </div>
        <ul class="detail-list">
            <li>
                <div class="productImg">
                    <img src="../images/KFCproduct1.png" alt="">
                </div>
                <div class="productDescription">
                    <a href="javascript:;" class="productName">C27 两人小食组 新奥尔良烤翅2对+薯条(中)+黄金鸡块5块+劲爆鸡米花(小) 2016年10月凭肯德基优惠券</a>
                    <span class="productPrice">￥28</span>
                    <div class="productTime">
                        有效期至10月31日
                    </div>
                </div>
                <div class="go">
                    <img src="../images/arrow-right.svg" alt="">
                </div>                
            </li>
            <li>
                <div class="productImg">
                    <img src="../images/KFCproduct2.png" alt="">
                </div>
                <div class="productDescription">
                    <a href="javascript:;" class="productName">C27 两人小食组 新奥尔良烤翅2对+薯条(中)+黄金鸡块5块+劲爆鸡米花(小) 2016年10月凭肯德基优惠券</a>
                    <span class="productPrice">￥28</span>
                    <div class="productTime">
                        有效期至10月31日
                    </div>
                </div>
                <div class="go">
                    <img src="../images/arrow-right.svg" alt="">
                </div>                
            </li>
            <li>
                <div class="productImg">
                    <img src="../images/KFCproduct3.png" alt="">
                </div>
                <div class="productDescription">
                    <a href="javascript:;" class="productName">C27 两人小食组 新奥尔良烤翅2对+薯条(中)+黄金鸡块5块+劲爆鸡米花(小) 2016年10月凭肯德基优惠券</a>
                    <span class="productPrice">￥28</span>
                    <div class="productTime">
                        有效期至10月31日
                    </div>
                </div>
                <div class="go">
                    <img src="../images/arrow-right.svg" alt="">
                </div>                
            </li>
            <li>
                <div class="productImg">
                    <img src="../images/KFCproduct4.png" alt="">
                </div>
                <div class="productDescription">
                    <a href="javascript:;" class="productName">C27 两人小食组 新奥尔良烤翅2对+薯条(中)+黄金鸡块5块+劲爆鸡米花(小) 2016年10月凭肯德基优惠券</a>
                    <span class="productPrice">￥28</span>
                    <div class="productTime">
                        有效期至10月31日
                    </div>
                </div>
                <div class="go">
                    <img src="../images/arrow-right.svg" alt="">
                </div>                
            </li>
            <li>
                <div class="productImg">
                    <img src="../images/KFCproduct1.png" alt="">
                </div>
                <div class="productDescription">
                    <a href="javascript:;" class="productName">C27 两人小食组 新奥尔良烤翅2对+薯条(中)+黄金鸡块5块+劲爆鸡米花(小) 2016年10月凭肯德基优惠券</a>
                    <span class="productPrice">￥28</span>
                    <div class="productTime">
                        有效期至10月31日
                    </div>
                </div>
                <div class="go">
                    <img src="../images/arrow-right.svg" alt="">
                </div>                
            </li>
        </ul>
        <!-- 遮罩层 -->
        <div class="mask hide">            
            <div class="swiper-outside">
                <div class="btn-close">X</div>
                <!-- 轮播图 -->
                <div class="swiper-container">
                    <!-- 图片 -->
                    <ul class="swiper-wrapper">
                        <li class="swiper-slide"><img src="../images/KFCproduct1.png" alt=""></li>
                        <li class="swiper-slide"><img src="../images/KFCproduct2.png" alt=""></li>
                        <li class="swiper-slide"><img src="../images/KFCproduct3.png" alt=""></li>
                        <li class="swiper-slide"><img src="../images/KFCproduct4.png" alt=""></li>
                    </ul>       
                </div>
                <!-- 导航按钮 放在.swiper-container外面--> 
                <div class="swiper-button-prev swiper-button-white"></div>
                <div class="swiper-button-next swiper-button-white"></div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="../lib/swiper/js/swiper.js"></script>

<!-- 1 引入zepto 核心模块 -->
<script src="../lib/zepto/zepto.js"></script>
  <!-- 2 引入 事件的模块 -->
<script src="../lib/zepto/event.js"></script>
  <!-- 3  动画模块  -->
<script src="../lib/zepto/fx.js"></script>
  <!-- 4 动画的拓展模块 -->
<script src="../lib/zepto/fx_methods.js"></script>
  <!-- 5 触屏模块 -->
<script src="../lib/zepto/touch.js"></script>
<script>
    // 遮罩层
    $('.productImg img').tap(function () {
        // console.log('商品图片被点击，跳出遮罩层和轮播图');
        $('.mask').removeClass('hide');
        // $('.mask').show();
        // 轮播图初始化
        var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            // 禁止自动播放
            autoplay:false,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    })
    $('.btn-close').tap(function () {
        $('.mask').addClass('hide');
        // $('.mask').hide();
    })
</script>